<template>
  <div class="container">
    <div class="fee-header">
      <select-role2 @familychang="familychangHandle"></select-role2>
      <div class="account-money re">
        <span class="money">{{account.accountBalance | fixedMoney}}</span>
        <span class="f12 text">账户余额</span>
        <span class="cz" @click="recharge">充值</span>
      </div>
    </div>
    <div class="infinite-container visual-content" style="top:160px;z-index:99;">
    <div class="account-main">

      <mu-list>
        <template  v-for="(item, index) in account.consumptionDetail">
          <div class="content-title" :key="index"><div>{{item.consumptionDate | changeToMonth}}</div></div>
          <mu-list-item class="bgwhite" :title="v.itemName" :describeText="v.itemTime" v-for="(v, i) in item.consumptionItems"  :key="v.itemTime" @click="gotoDetail(item)">
            <span slot="right" class="t5 f20" v-if="parseFloat(v.itemAmount) >= 0">+{{parseFloat(v.itemAmount).toFixed(2)}}</span>
            <span slot="right" class="t1 f20" v-else>{{parseFloat(v.itemAmount).toFixed(2)}}</span>
          </mu-list-item>
          <mu-divider :key="index" />
        </template>
      </mu-list>

    </div>
    </div>
    <confirm-id :familyPerson="familyPerson" :person="person" :show.sync="showConfirm"></confirm-id>
  </div>
</template>

<script>
import SelectRole2 from '@/components/SelectRole2'
import {commonAjax, RESTFUL_API} from '@/api/api'
import confirmId from '@/components/confirmId'
export default {
  components: {SelectRole2, confirmId},
  data () {
    return {
      person: JSON.parse(sessionStorage.person || '{}'),
      familyPerson: JSON.parse(sessionStorage.familyPerson || '{}'),
      account: {
        consumptionDetail: [],
        accountBalance: 0
      },
      showConfirm: false,
      selectedPerson: '请选择就诊人'
    }
  },
  mounted () {
  },
  methods: {
    selectPerson (val) {
      this.familyPerson = val
      sessionStorage.familyPerson = JSON.stringify(val)
      this.checkAuth(val)
    },
    familychangHandle (f) {
      this.familyPerson = f
      this.queryAccount()
    },
    checkAuth (val) {
      if (val.certificationValidityPeriod === '1') {
        this.queryAccount()
      } else {
        this.account = []
        this.showConfirm = true
      }
    },
    queryAccount () {
      let params = {
        patientMedicalCardType: 1,
        patientMedicalCardNumber: '',
        source: 1,
        patientCode: this.familyPerson.patientcode || '',
        uid: this.person.id,
        patientIdentityCardType: this.familyPerson.cardtype,
        patientIdentityCardNumber: this.familyPerson.idcard
      }
      commonAjax(`${RESTFUL_API.queryAccount}`, params, true).then(res => {
          if (res.data.code == 200) {
          this.account = res.data.data
        } else {
          this.account = []
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.message || '暂无数据',
            timeout: 2500
          })
        }
      })
    },
    changeRole () {
      this.$router.push('/appointment/changeFamily')
    },
    recharge () {
      this.$router.push('/inpatient-care/prePayHand')
    },
    gotoDetail (item) {
      if (!item.tradeNo) {
        return
      }
      // todo
      this.$router.push({
        path: '/setting/query-account/detail',
        query: Object.assign({realname: this.familyPerson.realname}, item)
      })
    }
  },
  beforeDestroy () {
  }
}
</script>

<style lang="less" scoped>
 @import '../../common/css/vars.less';
 @import "../../common/css/flex.css";

 .fee-header {
   background-image: url(../../assets/images/bg_zhcx.png);
   background-repeat: no-repeat;
   background-size: 100%;
   height:140px;
   color: #fff;
   margin: 10px;
   padding-top: 6px;
   @media screen and (max-width : 400px){
     padding-top: 4px;
   }
 }
 .content-title {
   margin: 6px 0;
   >div{
     border-left: 4px solid @color-primary;
     padding-left: 10PX;
   }
 }
.account-money {
  @color: #fff;
  text-align: center;
  padding: 0 0 1em;
  >.text{
    color: #fff;
    display: block;
  }
  >.money {
    font-size: 2.2em;
    display: block;
    color: #fff;
  }
}
.cz {
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  right: 15px;
  bottom: 0;
  color: @color-primary;
  border-radius: 16px;
  padding: 2px 10px;
}
</style>
